<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
	<meta itemprop="image" content="http://xn--czr85lks2d.tel/jsp/shangxueyuan/images/logo.png" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="apple-touch-icon" href="images/logoHome.png" />
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/swiper.animate1.0.3.min.js" ></script>
	<!-- <script type="text/javascript" src="js/index.js"></script> -->
</head>
<body>
	<div class="swiper-container">
	  <div class="swiper-wrapper">
	    <div class="swiper-slide clearfix">
	    	<h1 class="fl">开起聊天模式</h1>
	    	<p class="ani fr" swiper-animate-effect="bounceInRight" swiper-animate-duration="3s" swiper-animate-delay="0s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s" swiper-animate-delay="1s">测试文字</p>
	    	<p class="ani fr" swiper-animate-effect="bounceInRight" swiper-animate-duration="3s" swiper-animate-delay="3s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s" swiper-animate-delay="5s">测试文字</p>
	    	<p class="ani fr" swiper-animate-effect="bounceInRight" swiper-animate-duration="3s" swiper-animate-delay="7s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s" swiper-animate-delay="9s">测试文字</p>
	    	<p class="ani fr" swiper-animate-effect="bounceInRight" swiper-animate-duration="3s" swiper-animate-delay="11s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s" swiper-animate-delay="13s">测试文字</p>
	    </div>
	    <div class="swiper-slide">
			<h1 class="fl">随便写点动效</h1>
	    	<p class="ani fr" swiper-animate-effect="zoomOut" swiper-animate-duration="3s" swiper-animate-delay="0s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="zoomOutDown" swiper-animate-duration="3s" swiper-animate-delay="1s">测试文字</p>
	    	<p class="ani fr" swiper-animate-effect="zoomOutLeft" swiper-animate-duration="3s" swiper-animate-delay="3s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="zoomOutRight" swiper-animate-duration="3s" swiper-animate-delay="5s">测试文字</p>
	    	<p class="ani fr" swiper-animate-effect="zoomOutUp" swiper-animate-duration="3s" swiper-animate-delay="7s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="hinge" swiper-animate-duration="3s" swiper-animate-delay="9s">测试文字</p>
	    	<p class="ani fr" swiper-animate-effect="rollIn" swiper-animate-duration="3s" swiper-animate-delay="11s">测试文字</p>
	    	<p class="ani fl" swiper-animate-effect="rollOut" swiper-animate-duration="3s" swiper-animate-delay="13s">测试文字</p>
	    </div>
	    <div class="swiper-slide">slider3</div>
	  </div>
	</div>
</body>
<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container', {
			slidesPerView :'auto',
            // autoplay:5000,
            direction:'vertical',
		onInit: function(swiper){ 
	      swiperAnimateCache(swiper); 
	      swiperAnimate(swiper);
	    }, 
	    onSlideChangeEnd: function(swiper){ 
	      swiperAnimate(swiper);
	    } 
	})

</script>
</html>